<template>
    <div>
        <div class="swiper-container">
            <el-carousel trigger="click" :height="carousel_height">
                <el-carousel-item class="swiper-slide" key="1">
                    <a href="javascript:void(0)" target="_self">
                        <img src="~/assets/img/20211130150739281df8.jpg" alt="" title=""
                            class="img-responsive swiperImg">
                        <div id="Sub36920572_1" isModuleContainer="true"
                            class="ModuleContainer SubContainer ModuleSlideContainer module_36920572"
                            module-container-type="ModuleSlide" a-link-value="" a-link-target="_self" style="">

                        </div>
                    </a>
                </el-carousel-item>
                <el-carousel-item class="swiper-slide">
                    <a href="javascript:void(0)" target="_self">
                        <img src="~/assets/img/2021113015073913d4e1.jpg" alt="" title="" class="swiperImg">
                        <div id="Sub36920572_2" isModuleContainer="true"
                            class="ModuleContainer SubContainer ModuleSlideContainer module_36920572"
                            module-container-type="ModuleSlide" a-link-value="" a-link-target="_self" style="">

                        </div>
                    </a>
                </el-carousel-item>
                <el-carousel-item class="swiper-slide">
                    <a href="javascript:void(0)" target="_self">
                        <img src="~/assets/img/20220615091909d3f0b7.jpg" alt="" title="" class="swiperImg">
                        <div id="Sub36920572_3" isModuleContainer="true"
                            class="ModuleContainer SubContainer ModuleSlideContainer module_36920572"
                            module-container-type="ModuleSlide" a-link-value="" a-link-target="_self" style="">

                        </div>
                    </a>
                </el-carousel-item>
                <el-carousel-item class="swiper-slide">
                    <a href="javascript:void(0)" target="_self">
                        <img src="~/assets/img/20241011084950f72018.jpg" alt="" title="" class="swiperImg">
                        <div id="Sub36920572_4" isModuleContainer="true"
                            class="ModuleContainer SubContainer ModuleSlideContainer module_36920572"
                            module-container-type="ModuleSlide" a-link-value="" a-link-target="_self" style="">

                        </div>
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<style lang="less" scoped>
:global(.el-carousel__item) {
    h3 {
        line-height: 150px;
    }
}
</style>

<script lang="ts" setup>
definePageMeta({
    title: 'Home',
    description: 'Home page description',
    image: 'https://example.com/image.jpg',
    url: 'https://example.com',
    type: 'website',
    site_name: 'My Site',
    locale: 'en',
    twitter: {
        card: 'summary_large_image',
        site: '@site',
        creator: '@creator'
    },
    og: {
        title: 'Open Graph Title',
        description: 'Open Graph Description',
        image: 'https://example.com/og-image.jpg',
        url: 'https://example.com',
        type: 'website',
        site_name: 'My Site',
        locale: 'en_US'
    }
})

const carousel_height = ref("842px")
onMounted(() => {
    console.log('Home page mounted')
    const updateCarouselHeight = () => {
        carousel_height.value = window.innerWidth * 850 / 1920 + "px";
    };

    updateCarouselHeight();
    window.addEventListener('resize', updateCarouselHeight);
})

</script>
